@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">

            <h1>{{ $questionnaire->title }}</h1>

            <form action="/surveys/{{ $questionnaire->id }}-{{ Str::slug($questionnaire->title) }}" method="post">
                @csrf

                @foreach($questionnaire->questions as $key => $question)
                <div class="card mt-4">
                    <div class="card-header"><strong>{{ $key + 1 }}</strong> {{ $question->question }}</div>

                    <div class="card-body">

                        <ul class="list-group">
                            @foreach($question->answers as $answer)
                            <label for="answer{{ $answer->id }}">
                                <li class="list-group-item">
                                    <input type="radio" name="responses[{{ $key }}][answer_id]"
                                        id="answer{{ $answer->id }}" {{ (old('responses.' . $key . '.answer_id'
                                        )==$answer->id) ? 'checked' : '' }} class="me-2" value="{{ $answer->id }}">
                                    {{ $answer->answer }}

                                    <input type="hidden" name="responses[{{ $key }}][question_id]"
                                        value="{{ $question->id }}">
                                </li>
                            </label>
                            @endforeach
                        </ul>

                        @error('responses.' . $key . '.answer_id')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror

                    </div>
                    @endforeach



                    <div class="card mt-4">
                        <div class="card-header">Your Information</div>

                        <div class="card-body">
                            @csrf


                            <div class="form-group">
                                <label for="name">Name</label>
                                <input name="survey[name]" class="form-control" id="exampleInputEmail1"
                                    aria-describedby="nameHelp" placeholder="Enter your name">

                                <small id="nameHelp" class="form-text text-muted">Don't enter any sensitive
                                    information</small>

                                @error('name')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror

                            </div>

                            <div class="form-group">
                                <label for="email">Email</label>
                                <input name="survey[email]" class="form-control" id="exampleInputEmail1"
                                    aria-describedby="emailHelp" placeholder="Enter email">

                                <small id="emailHelp" class="form-text text-muted">Temp mail is also a choice</small>

                                @error('email')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror

                                <div class="mt-3">
                                    <button class="btn btn-dark" type="submit">Complete Survey</button>
                                </div>
            </form>
        </div>
    </div>
</div>
@endsection